<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>沐水莲心-后台管理</title>
	<link rel="stylesheet" href="../../public/plugin/layui/css/layui.css" type="text/css">
	<style type="text/css">
		body{
			background:#888 url(../../public/img/bg1.png) no-repeat 100% 0;
			background-size:cover;
		}
		.login{
			margin:10% auto;
			width:50%;
			height:400px;
		}
		label{
			font-size:18px;
			color:white;
		}
		form i{
			width: 30px;
			height: 30px;
			display: inline-block;
			position: absolute;
		}
		
		#name i{
			background-image: url("../../public/img/user1.png");
			background-repeat: no-repeat;
			left: 10px;
			top: 5px;
		}
		#password i{
			background-image: url("../../public/img/password1.png");
			background-repeat: no-repeat;
			left: 10px;
			top: 5px;
		}
	</style>
	<script src="../../public/js/jquery.js"></script>
	<script src="../../public/plugin/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
        $(function(){
            $("#name input").focus(function(){
                $(this).prev("i").css({"background-image":"url(../../public/img/user2.png)"});
            });
            $("#name input").blur(function(){
                $(this).prev("i").css({"background-image":"url(../../public/img/user1.png)"});
            });
            $("#password input").focus(function(){
                $(this).prev("i").css({"background-image":"url(../../public/img/password2.png)"});
            });
            $("#password input").blur(function(){
                $(this).prev("i").css({"background-image":"url(../../public/img/password1.png)"});
            });
			$("#code").click(function(){
				//因为浏览器会缓存，如果刷新后url相同，图片也就不变，等于没刷新，加个随机数，url每次都不同
				$("img").attr("src","../../core/captcha.php?n="+Math.random());
			});
        });
    </script>
</head>
<body>
	<div class="login">
		<h2 style="padding-left:30%;">沐水莲心-后台管理登入界面</h2>
		<form action="../../model/admin/validate.php" method="post">
		  <div class="layui-form-item" style="padding-top: 20px;padding-left: 90px;">
			<label class="layui-form-label">用户名：</label>
			<div class="layui-input-block" id="name">
			  <i></i><input type="text" name="username" placeholder="请输入用户名" class="layui-input" id="user" style="width:60%;padding-left:50px;">
			</div>
		  </div>
		  <div class="layui-form-item" style="padding-top: 20px;padding-left: 90px;">
			<label class="layui-form-label">密　码：</label>
			<div class="layui-input-block" id="password">
			  <i></i><input type="password" name="password" placeholder="请输入密码" id="pass" class="layui-input" style="width:60%;padding-left:50px;">
			</div>
		  </div>
		  
		  <div class="layui-form-item" style="padding-top: 20px;padding-left: 90px;position:relative;">
			<label class="layui-form-label">验证码：</label>
			<div class="layui-input-block">
			  <input type="text" name="captcha" placeholder="请输入验证码" id="captcha" class="layui-input" style="width:30%;">
			  <img src="../../core/captcha.php" onclick="this.src='../../core/captcha.php?n='+Math.random()" style="cursor:pointer;position:absolute;top:0px;left:180px;width:100px;height:40px"/>
			  <span style="font-size:12px;position:absolute;left:300px;top:10px;"><a href="javascript:;" id="code">看不清，换一张！</a></span>
			</div>
		  </div>
		 
		 
			<div class="layui-input-block" style="padding-left:150px;">
			  <button class="layui-btn layui-btn-normal" id="login_btn">登入后台管理</button>
			</div>
		
	  
		</form>
	</div>
</body>
</html>
<script >
	$(function(){
		$("#login_btn").on('click',function(){

			var selectuser = $("#user").val();
			var pword = $("#pass").val();
			var captcha = $("#captcha").val();
			if(captcha == "" || captcha.length != 4){
				layer.confirm('验证码不为空或长度不为4！', {
				  btn: ['确定'] //按钮
				});
				$("#user").focus();
				return false;
			}
			if (selectuser == "" || selectuser.length <= 1) {
				//alert("用户名不能为空");
				//询问框
				layer.confirm('用户名不能为空！', {
				  btn: ['确定'] //按钮
				});
				$("#user").focus();
				return false;
			}
			if (pword == "" || pword.length < 1) {
				//alert("密码不能为空");
				layer.confirm('密码不能为空！', {
				  btn: ['确定'] //按钮
				});
				$("#pass").focus();
				return false;
			}
			
			/*$.ajax({
				type: "POST",
				url: "login.php",
				data:{"adid":selectuser,"mima":pword},
				dataType:"json",
				success: function(message){
					if(message.status=="登入成功！"){
						window.location.href='../index.php';
					}
					else if(message.status=="用户名或密码错误!"){
						alert("用户名或密码错误");
					}
					else if(message.status=="用户不存在！"){
						alert("用户不存在！");
					}
				}

			});*/
		
		});
	});

</script>